<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>项目学习</title>
    <link rel="stylesheet" href="../css/eui.css">
    <link rel="stylesheet" href="../css/style.css">
    <script src="../js/jQuery-1.11.3.min.js"></script>
    <script src="../js/common.js"></script>
  </head>
  <body>
    <h1 class="block">星级评分条</h1>
    <div><span class="grayStar"><em class="colorStar" style="width:80%;"></em></span></div>
    <h1 class="block">可伸缩可展开的高度很调皮的——树形菜单</h1>
    <div class="tree-cont">
      <div class="treeBar">
        <ul>
                    <li class="tree-items active"><a class="tree-item-link" href="javascript:;"><i class="icon icon-home"></i>首页<i class="icon"></i></a>
                    </li>
                    <li class="tree-items"><a class="tree-item-link" href="javascript:;"><i class="icon icon-userinfo"></i>一级1<i class="icon icon-pulldown"></i></a>
                      <div class="nav-item-submenu">
                        <ul>
                          <li><a class="submenu-item-link" href="javascript:;"><i class="icon icon-navarrow"></i>二级</a></li>
                          <li><a class="submenu-item-link" href="javascript:;"><i class="icon icon-navarrow"></i>二级</a></li>
                          <li><a class="submenu-item-link" href="javascript:;"><i class="icon icon-navarrow"></i>二级</a></li>
                          <li><a class="submenu-item-link" href="javascript:;"><i class="icon icon-navarrow"></i>二级</a></li>
                          <li><a class="submenu-item-link" href="javascript:;"><i class="icon icon-navarrow"></i>二级</a></li>
                          <li><a class="submenu-item-link" href="javascript:;"><i class="icon icon-navarrow"></i>二级</a></li>
                          <li><a class="submenu-item-link" href="javascript:;"><i class="icon icon-navarrow"></i>二级</a></li>
                          <li><a class="submenu-item-link" href="javascript:;"><i class="icon icon-navarrow"></i>二级</a></li>
                          <li><a class="submenu-item-link" href="javascript:;"><i class="icon icon-navarrow"></i>二级</a></li>
                        </ul>
                      </div>
                    </li>
                    <li class="tree-items"><a class="tree-item-link" href="javascript:;"><i class="icon icon-customer"></i>一级2<i class="icon icon-pulldown"></i></a>
                      <div class="nav-item-submenu">
                        <ul>
                          <li><a class="submenu-item-link" href="javascript:;"><i class="icon icon-navarrow"></i>二级</a></li>
                          <li><a class="submenu-item-link" href="javascript:;"><i class="icon icon-navarrow"></i>二级</a></li>
                          <li><a class="submenu-item-link" href="javascript:;"><i class="icon icon-navarrow"></i>二级</a></li>
                          <li><a class="submenu-item-link" href="javascript:;"><i class="icon icon-navarrow"></i>二级</a></li>
                        </ul>
                      </div>
                    </li>
                    <li class="tree-items"><a class="tree-item-link" href="javascript:;"><i class="icon icon-briefcase"></i>一级3<i class="icon"></i></a>
                    </li>
                    <li class="tree-items"><a class="tree-item-link" href="javascript:;"><i class="icon icon-bargraph"></i>一级4<i class="icon icon-pulldown"></i></a>
                      <div class="nav-item-submenu">
                        <ul>
                          <li><a class="submenu-item-link" href="javascript:;"><i class="icon icon-navarrow"></i>二级</a></li>
                          <li><a class="submenu-item-link" href="javascript:;"><i class="icon icon-navarrow"></i>二级</a></li>
                          <li><a class="submenu-item-link" href="javascript:;"><i class="icon icon-navarrow"></i>二级</a></li>
                          <li><a class="submenu-item-link" href="javascript:;"><i class="icon icon-navarrow"></i>二级</a></li>
                          <li><a class="submenu-item-link" href="javascript:;"><i class="icon icon-navarrow"></i>二级</a></li>
                          <li><a class="submenu-item-link" href="javascript:;"><i class="icon icon-navarrow"></i>二级</a></li>
                          <li><a class="submenu-item-link" href="javascript:;"><i class="icon icon-navarrow"></i>二级</a></li>
                        </ul>
                      </div>
                    </li>
        </ul>
      </div>
      <div class="info">
        <h3>问题总结</h3>
        <ol>
          <li>pug，mixin用不了，想要批量的生产结构代码（后来解决了)</li>
          <li>html，结构没理清，a和div应该是并列结构，不是包含结构</li>
          <li>css，左侧树菜单可以无限期的延长的做法需要掌握</li>
          <li>css，展开的div左边少5个像素的视觉差不会</li>
          <li>css，巧用增加类名的方式，改变点击/交互后的效果 的想法没想到</li>
          <li>js，给展开的div加一个动画，做不了。</li>
          <li>js，展开的能做了，但是他这个展开不太一样，没有二级菜单的不能展开，点击也不变背景色（这就涉及判断了），有二级菜单的，点击的时候展开，展开后再次点击他就关闭（突然领悟这种就用index=0/1的方法，本来之前想的是判断高度，捣鼓半天没成功，因为隐藏后高度清零，再次点击，高度就没法加上去了，因为不是固定的高度，问题就坑在这里了，现在突然想到用index=0的情况，等到点击后index=1；然后判断index的值来展开闭合！这么经典的方法差一点就忘了！)</li>
          <li>firebug 截止目前还是不能顺利的运行断点后的代码，找不到关键点打开这个功能，都是靠巧合</li>
        </ol>
        <h3>新技能</h3>
        <ol>
          <li>用firebug的调试工具调试js，非常管用，打断点，精确查找错误点</li>
          <li>用console.log写出多个object：console.log($(this).children(".nav-item-submenu"));，然后在Console中查看其详细的数据值，寻找规律，找不同的地方作为判断依据。对于解决问题有很大的帮助.比如这一句：var length = $(this).children(".nav-item-submenu").length;console.log(length);</li>
          <li>东翌学院学到的文字分析js逻辑的方法很管用，把逻辑用文字描述出来，之后再用代码进行表现就不难了，因为自己的思维不会再乱了。</li>
        </ol>
      </div>
    </div>
    <h1 class="block">tab选项卡(0818更改选项卡的样式)</h1>
    <div class="tab-wrap">
      <ul>
        <li class="cur"><a>1</a></li>
        <li><a>2</a></li>
        <li><a>3</a></li>
      </ul>
      <div class="tab-cont show">1-1</div>
      <div class="tab-cont">2-1</div>
      <div class="tab-cont">3-1</div>
    </div>
    <div class="info info-no-float">
      <h3>问题总结</h3>
      <ol>
        <li>js 用js的方法写一个tab选项卡，没有写出来，有点忘了需要熟悉，jq的可以写出来，这个页面中两次用siblings都不起作用，需要换行不能链式，不造啥原因，好像是jqeury源码的问题。</li>
      </ol>
    </div>
    
    <h1 class="block">表格布局</h1>
    <table class="cwd-table">
      <colgroup>
        <col width="300">
        <col width="300">
        <col width="300">
        <col width="200">
      </colgroup>
      <thead>
        <tr>
          <th>新闻标题</th>
          <th>新闻类型</th>
          <th>发布时间</th>
          <th>二维码</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>新闻标题标题标题</td>
          <td>降价促销</td>
          <td>2015-03-10</td>
          <td>qrCode</td>
        </tr>
        <tr>
          <td>新闻标题标题标题</td>
          <td>降价促销</td>
          <td>2015-03-10</td>
          <td>qrCode</td>
        </tr>
        <tr>
          <td>新闻标题标题标题</td>
          <td>降价促销</td>
          <td>2015-03-10</td>
          <td>qrCode</td>
        </tr>
        <tr>
          <td>新闻标题标题标题</td>
          <td>降价促销</td>
          <td>2015-03-10</td>
          <td>qrCode</td>
        </tr>
      </tbody>
    </table>
    <h1 class="block">表格布局之th与td的合作</h1>
    <table class="cyt-table">
      <thead>
        <tr>
          <th colspan="2">保养项目</th>
          <th>价格及用时</th>
          <th>点的使用</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>更换机油</th>
          <th></th>
                    <td><span>材料费：
                        <input>元</span><span>用时：
                        <input>分钟</span>
                    </td>
          <td><b class="cyt-point">● </b></td>
        </tr>
        <tr>
          <th rowspan="2">更换变速汽油</th>
          <th>手自一体</th>
                    <td><span>材料费：
                        <input>元</span><span>用时：
                        <input>分钟</span>
                    </td>
          <td>看啥？我没有点的,<br/>我很特殊的<br/>我们这一行还<br/>换行了呢！</td>
        </tr>
        <tr>
          <th>自动</th>
                    <td><span>材料费：
                        <input>元</span><span>用时：
                        <input>分钟</span>
                    </td>
          <td><b class="cyt-point">●</b></td>
        </tr>
      </tbody>
    </table>
    <div class="info info-no-float">
      <h3>问题总结</h3>
      <ol>
        <li>注意tbody那里的th与td的结合使用，是为了方便日后写不同的样式而做的结构上的区分</li>
        <li>注意需要合并的th或者td的做法，横向合并两个用colspan="2"，纵向合并两个用rowspan="2".</li>
        <li>那个大圆点的实现，是在内容中复制了一个标点，其实可以利用span等内联元素塑造一个</li>
      </ol>
    </div>
  
    <h1 class="block">查看、修改信息</h1>
    <div class="clearfix">
      <div class="staff-info-box">
        <h3>查看员工信息</h3>
        <div class="staff-btn"><a class="staff-btn-change">修改</a><a class="staff-btn-del">删除</a></div>
        <div class="staff-info">
          <div class="staff-info-row">
            <div class="staff-info-title"><span>姓名：</span></div>
            <div class="staff-info-cont"><span>王销理</span></div>
          </div>
          <div class="staff-info-row">
            <div class="staff-info-title"><span>照片：</span></div>
            <div class="staff-info-cont"><span>
                <image src="https://avatars1.githubusercontent.com/u/24501131?s=180&v=4"></image></span></div>
          </div>
       
          <div class="staff-info-row">
            <div class="staff-info-title"><span>400分机号：</span></div>
            <div class="staff-info-cont"><span>8888</span></div>
          </div>
          <div class="staff-info-row">
            <div class="staff-info-title"><span>手机：</span></div>
            <div class="staff-info-cont"><span>123456789</span></div>
          </div>
          <div class="staff-info-row">
            <div class="staff-info-title"><span>固话：</span></div>
            <div class="staff-info-cont"><span>010-12345467</span></div>
          </div>
          <div class="staff-info-row">
            <div class="staff-info-title"><span>QQ：</span></div>
            <div class="staff-info-cont"><span>3215424</span></div>
          </div>
          <div class="staff-info-row">
            <div class="staff-info-title"><span>微博：</span></div>
            <div class="staff-info-cont"><span>http://weibo.com/u/1234567890/home?wvr=1</span></div>
          </div>
          <div class="staff-info-row">
            <div class="staff-info-title"><span>员工介绍：</span></div>
            <div class="staff-info-cont"><span>商务男子</span></div>
          </div>
        </div>
        <div class="info info-no-float">
          <h3>问题总结</h3>
          <ol>
            <li>注意这种结构的行盒子，按行分组</li>
            <li>label写错愕 写成lable，不出效果。</li>
            <li>border的颜色大多是dedede</li>
            <li style="color: red;">内联元素的padding对于撑起父元素的高度是不起作用的,需要转化成inline-block或者float一下。</li>
            <li>input的:focus模式下，一定要关掉outline，这是标配</li>
            <li>在传数据上，也有问题。照片那里的结构，和其他的不一样，多了一个image标签，我把image标签写在数据里传进来他就会翻译成文本。只能打断前两个不传参，后边的循环替换数据</li>
            <li style="background:#1bc28a;color:white;padding: 5px;">在做button的背景色、broder色、以及hover/focus模式的背景色和边框的时候，不知道怎么才能快速取值，到底颜色值有什么规律呢？这就去研究明白，还有一个HEX十六进制颜色模式，我们在浏览器中选中的颜色就是这个模式的。他有什么颜色的分布规律吗啊？</li>
          </ol>
        </div>
      </div>
      <div class="staff-info-box staff-change-box">
        <h3>修改员工信息</h3>
        <div class="staff-change">
          <div class="staff-info">
            <div class="staff-info-row">
              <div class="staff-info-title"><i class="icon icon-snow icon-red"></i><span>姓名：</span></div>
              <div class="staff-info-cont">
                <p>
                  <input type="text">
                </p>
                <p class="staff-change-info">最多6个汉字（12个字符）</p>
              </div>
            </div>
            <div class="staff-info-row">
              <div class="staff-info-title"><span>金牌销售：</span></div>
              <div class="staff-info-cont">
                <p>
                  <label>
                    <input type="checkbox"><i class="icon icon-star icon-orange"></i>
                  </label>
                </p>
              </div>
            </div>
            <div class="staff-info-row">
              <div class="staff-info-title"><i class="icon icon-snow icon-red"></i><span>照片：</span></div>
              <div class="staff-info-cont">
                <div class="staff-image-box">
                  <div class="staff-image-btn">
                    <button>上传</button>
                  </div>
                </div>
              </div>
            </div>
            <div class="staff-info-row">
              <div class="staff-info-title"><i class="icon icon-snow icon-red"></i><span>职位：</span>
              </div>
              <div class="staff-info-cont">
                <p>
                  <input type="text">
                </p>
                <p class="staff-change-info">最多6个汉字（12个字符）</p>
              </div>
            </div>
            <div class="staff-info-row">
              <div class="staff-info-title"><i class="icon icon-snow icon-red"></i><span>手机：</span>
              </div>
              <div class="staff-info-cont">
                <p>
                  <input type="text">
                </p>
              </div>
            </div>
            <div class="staff-info-row">
              <div class="staff-info-title"><span>固话：</span>
              </div>
              <div class="staff-info-cont">
                <p>
                  <input type="text">
                </p>
                <p class="staff-change-info">有分机：区号-电话号码-分机，如：010-62345-0</p>
                <p class="staff-change-info">无分机：区号-电话号码，如：010-645</p>
              </div>
            </div>
            <div class="staff-info-row">
              <div class="staff-info-title"><span>QQ：</span>
              </div>
              <div class="staff-info-cont">
                <p>
                  <input type="text">
                </p>
              </div>
            </div>
            <div class="staff-info-row">
              <div class="staff-info-title"><span>微博：</span>
              </div>
              <div class="staff-info-cont">
                <p>
                  <input type="text">
                </p>
                <p class="staff-change-info">链接地址必须以“http://”开头</p>
              </div>
            </div>
            <div class="staff-info-row">
              <div class="staff-info-title"><span>员工介绍：</span></div>
              <div class="staff-info-cont">
                <p>
                  <textarea></textarea>
                </p>
              </div>
            </div>
            <div class="staff-info-row">
              <div class="staff-info-cont">
                <input class="butInput" type="submit" value="提交">
                <input class="butInput" type="reset" value="取消">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <h1 class="block">公用 分页效果</h1>
    <div class="page-wrap">
      <ul class="pages clearfix">
        <li class="prevpage disable"><a href="javascript:;">上一页</a></li>
        <li class="active"><a href="javascript:;">1</a></li>
        <li><a href="javascript:;">2</a></li>
        <li><a href="javascript:;">3</a></li>
        <li class="disable"><a href="javascript:;">4</a></li>
        <li><a href="javascript:;">5</a></li>
        <li><a href="javascript:;">6</a></li>
        <li><a href="javascript:;">7</a></li>
        <li><a href="javascript:;">8</a></li>
        <li><a href="javascript:;">9</a></li>
        <li><a href="javascript:;">10</a></li>
        <li class="more-page"><a href="javascript:;">...</a></li>
        <li class="nextpage"><a href="javascript:;">下一页</a></li>
      </ul>
    </div>
    <div class="info info-no-float">
      <h3>问题总结</h3>
      <ol>
        <li>注意不同样式之间的选择器定义方法和样式的写法</li>
        <li>检查了半天，又是因为空格和tab一起用了导致的错误，是在句首而不是句尾，是包含关系的时候，没用tab换层级而用了一下空格导致的。出现过很多次这种问题，还是犯错</li>
      </ol>
    </div>

    <script>
      var jsonArr = [{"name" : "张三","age" : 21,"friend" : [{"name" : "李四"},{"name" : "王五"}]},{"name" : "张三2","age" : 212,"friend" : [{"name" : "李四2"},{"name" : "王五2"}]}];
      for(var i = 0; i <jsonArr.length; i++){
      	//- console.log(i) 
      	console.log(jsonArr[i]["age"]);
      	console.log(jsonArr[i]["name"]);
      	//- var arr = jsonArr[0]["friend"];
      	//- console.log(arr);
      	for(var y = 0; y <jsonArr[i]["friend"].length; y++){
      		//- console.log(jsonArr[i]["friend"].length)
      		console.log(jsonArr[i]["friend"][y]["name"]);
      	}
      }
    </script>
  </body>
</html>